import { ScrollView, View, StyleSheet } from "react-native";
import ListTile from "@/components/common/ListTile";
import Divider from "@/components/common/Divider";
import Gap from "@/components/common/Gap";
import { Entypo, Ionicons } from "@expo/vector-icons";

const Index = () => {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.sectionSeparator} />
      <ListTile
        title="应用设置"
        iconName="filter"
        leading={
          <Ionicons name="person-circle-outline" size={24} color="#555" />
        }
        trailing={<Entypo name="chevron-small-right" size={24} color="#555" />}
        onPress={() => console.log("应用设置")}
      />
      <Divider></Divider>
      <ListTile
        title="应用设置"
        iconName="filter"
        leading={
          <Ionicons name="person-circle-outline" size={24} color="#555" />
        }
        trailing={<Entypo name="chevron-small-right" size={24} color="#555" />}
        onPress={() => console.log("应用设置")}
      />
      {Gap.V20}
      <ListTile
        title="应用设置"
        iconName="filter"
        leading={
          <Ionicons name="person-circle-outline" size={24} color="#555" />
        }
        trailing={<Entypo name="chevron-small-right" size={24} color="#555" />}
        onPress={() => console.log("应用设置")}
      />
      <Divider></Divider>
      <ListTile
        title="应用设置"
        iconName="filter"
        leading={
          <Ionicons name="person-circle-outline" size={24} color="#555" />
        }
        trailing={<Entypo name="chevron-small-right" size={24} color="#555" />}
        onPress={() => console.log("应用设置")}
      />
      <Divider></Divider>
      <ListTile
        title="应用设置"
        iconName="filter"
        leading={
          <Ionicons name="person-circle-outline" size={24} color="#555" />
        }
        trailing={<Entypo name="chevron-small-right" size={24} color="#555" />}
        onPress={() => console.log("应用设置")}
      />
      {Gap.V20}
      <ListTile
        title="应用设置"
        iconName="filter"
        leading={
          <Ionicons name="person-circle-outline" size={24} color="#555" />
        }
        trailing={<Entypo name="chevron-small-right" size={24} color="#555" />}
        onPress={() => console.log("应用设置")}
      />
      <Divider></Divider>
      <ListTile
        title="应用设置"
        iconName="filter"
        leading={
          <Ionicons name="person-circle-outline" size={24} color="#555" />
        }
        trailing={<Entypo name="chevron-small-right" size={24} color="#555" />}
        onPress={() => console.log("应用设置")}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5", // 背景色
  },
  sectionSeparator: {
    height: 10,
  },
});

export default Index;
